<template>
	<SecondTitle title="铁路客流量分析" />

	<Echarts container="accepted-project-ratio" :options="option()" :height="530" />
</template>
<script lang="ts" setup>
	import { resetSize } from '@/utils/reset'
	import { ref, onMounted } from 'vue'
	import * as echarts from 'echarts'
	import { getRailwayPassengerStatistical } from '@/api/train'
	import dayjs from 'dayjs'

	const flowResData = ref([]);
	const inboundFlow = ref([]);
	const outboundFlow = ref([]);
	const dateFlow = ref([]);

	onMounted(async () => {
		await getRailwayPassengerStatistical().then((flowRes: any) => {

			console.log("flowRes is ", flowRes)
			inboundFlow.value = flowRes.data.map((flowItem: any) => flowItem.inCount);
			outboundFlow.value = flowRes.data.map((flowItem: any) => flowItem.outCount);
			dateFlow.value = flowRes.data.map((flowItem: any) => flowItem.time);
		})
	})


	const option = () => {
		let barData = [
			{
				itemStyle: {
					color: 'rgba(219, 238, 255, 0.1036)',
				},
				value: 5000,
			},
			{
				itemStyle: {
					color: 'rgba(255,255,255,0)',
				},
				value: 5000,
			},
			{
				itemStyle: {
					color: 'rgba(219, 238, 255, 0.1036)',
				},
				value: 5000,
			},
			{
				itemStyle: {
					color: 'rgba(255,255,255,0)',
				},
				value: 5000,
			},
			{
				itemStyle: {
					color: 'rgba(219, 238, 255, 0.1036)',
				},
				value: 5000,
			},
			{
				itemStyle: {
					color: 'rgba(255,255,255,0)',
				},
				value: 5000,
			},
			{
				itemStyle: {
					color: 'rgba(219, 238, 255, 0.1036)',
				},
				value: 5000,
			},
			{
				itemStyle: {
					color: 'rgba(255,255,255,0)',
				},
				value: 5000,
			},
			{
				itemStyle: {
					color: 'rgba(219, 238, 255, 0.1036)',
				},
				value: 5000,
			},
		]
		let opt = {
			legend: {
				data: ['进站客流量', '出站客流量'],

				show: true,
				top: '0%',
				left: 'right',
				textStyle: {
					color: '#aaa',
					fontSize: 28,
				},
			},
			grid: {
				left: '5%',
				right: '0%',
				bottom: '10%',
				top: '15%',
				containLabel: true,
				z: 22,
			},
			xAxis: {
				type: 'category',
				data: dateFlow.value,
				axisLabel: {
					formatter: function(value: any) {
						// 提取时间部分 "HH:mm:ss"
						// return value.split(' ')[1]; 
            return value; 
					},
					textStyle: {
						color: '#A4BACE',
						fontSize: 28,
					},
					interval: 1,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: '#1F4B7B',
					},
				},
				axisTick: {
					show: false,
				},
			},
			yAxis: {
				name: '人',
				nameLocation: 'end',
				nameTextStyle: {
					padding: [0, 0, 0, -105],
					lineHeight: 60,
					color: '#A4BACE',
					fontSize: 28,
				},
				type: 'value',
				max: 5000,
				axisLabel: {
					textStyle: {
						color: '#A4BACE',
						fontSize: 28,
						padding: [0, 25, 0, 0],
					},
				},
				splitLine: {
					show: true,
					lineStyle: {
						type: 'dashed',
						color: 'rgba(255, 255, 255, .5)',
					},
				},
			},
			tooltip: {
				trigger: 'axis',
				backgroundColor: 'rgba(49, 59, 79, 0.8)',
				borderWidth: 1,
				borderColor: 'rgba(255, 255, 255, 0.2)',
				textStyle: {
					color: '#fff',
					fontSize: 22,
				},
				formatter: function (params: any) {
					// 过滤出只需要显示的系列
					const filteredSeries = params.filter((param: any) => param.seriesName !== 'bar')

					// 如果没有需要显示的系列，返回空
					if (filteredSeries.length === 0) {
						return ''
					}

					// 构造 tooltip 内容
					let tooltipText = `${params[0].name}<br/>`
					filteredSeries.forEach((item: any) => {
						tooltipText += `${item.marker}${item.seriesName}: ${item.data}人<br/>`
					})

					return tooltipText
				},
			},
			series: [
				{
					data: barData,
					type: 'bar',
					barWidth: 105,
					name: 'bar',
				},
				{
					name: '进站客流量',
					data: inboundFlow.value,
					type: 'line',
					smooth: true,
					showSymbol: false,
					symbolSize: 20,
					symbol: 'circle',
					itemStyle: {
						color: '#FFF5A0',
					},
					lineStyle: {
						normal: {
							color: '#FFF5A0',
							width: 5,
						},
					},
					areaStyle: {
						color: 'rgba(255, 245, 160, .1)',
					},
					zLevel: 99,
				},
				{
					name: '出站客流量',
					data: outboundFlow.value,
					type: 'line',
					smooth: true,
					symbolSize: 20,
					symbol: 'circle',
					itemStyle: {
						color: '#34A0FF',
					},
					lineStyle: {
						normal: {
							color: '#34A0FF',
							width: 5,
						},
					},
					areaStyle: {
						color: 'rgba(52, 160, 255, .1)',
					},
					showSymbol: false,
					zLevel: 99,
				},
			],
		}
		return opt
	}
</script>

<style lang="scss" scoped></style>
